این مقاله بصورت قدم به قدم شما را برای متحرک نمودن یک بنری (تصویر تبلیغاتی) که در فتوشاپ ساخته شده است را راهنمایی می کند. توجه: برای انجام این آموزش کاربردی و آسان ما یک بنری را در فتوشاپ طراحی نموده ایم و سپس آنرا متحرک کرده ایم . بعد از دریافت مثالی از بنر ، مراحل زیر را طی کنید:
چندین بنر مختلف وجود دارد که بعضی از آنها در زیر لیست شده است:
ابعاد (پیکسل) نوع 468 x 60 بنر کامل
392 x 72 بنر بصورت عمودی 234 x 60 بنر کامل 125 x 125 نصف بنر بصورت مربعی
120 x 90 بنر دکمه ای 120 x 60 بنر دکمه ای 88 x 31 بنر دکمه ای کوچک 120 x 240 بنر افقی
در این مثال ما به شما بنر متحرک 468x60 پیکسل را یاد می دهیم. فایلی را که دانلود کرده اید را در فتوشاپ باز کنید. توجه: ما در این مثال ما یک یک بنری با چندین شی و متن در لایه های جدا خواهیم ساخت. خصوصیت رنگ در هر فریم متغیر قرار کرده ایم، برای مثال اولین فریم خاکستری و دومین فریم رنگ قرمز روشن می باشد. تعدادی از اشیاء و متنهای فریم اول را مرئی و بقیه فریم ها را نامرئی نموده ایم.
بنر در Adobe Image Ready:
بعد از باز کردن بنر در فتوشاپ آنرا با زدن دکمه های ترکیبی (Ctrl+Shift+M) (و یا File > Jump to > Adobe Image ready ) به Adobe Image Ready انتقال دهید. اگر پالت Animation غیرفعال است آنرا با استفاده از منوی Window آنرا فعال نمایید. ابتدا از پالت Animation بر روی فریم اول کلیک نمایید. می بینید که در لایه Layers لایه هایی که با رنگ قرمز روشن مشخص شده اند بعضی مرئی و بعضی دیگر نامرئی می باشند. در پالت Animation بر روی دکمه Duplicate Current Frame کلیک نمایید و یک فریم جدید بسازید و سپس دومین فریم را انتخاب کنید. در فریم دوم همانند فریم اول لایه هایی که مرئی و نامرئی بوده اند همچنان باقی می مانند. همچنین برای ساخت فریمهای بعدی نیز باید از این دکمه استفاده نمایید. توجه: در این مثال، 13 فریم ساخته شده است و در هر فریم بعضی لایه ها مرئی و بعضی دیگر نامرئی شده اند
اجرای انیمیشن:
برای اجرای انیمشن ساخته شده در پالت Animation بر روی دکمه Play کلیک کنید تا پیش نمایش آنرا مشاهده نمایید. انیمشن ممکن است که خیلی سریع اجرا گردد.(همه فریم ها با یک سرعت هستند).
زمان بندی فریم ها:
برای تنظیم زمان فریم ها بر روی نشانه گر زیر هر فریم کلیک نمایید تا منوی Pop-up باز گردد. مدت زمانی که هر فریم لازم دارد را برای هر یک تنظیم کنید.
برای ادامه چرخش انیمشن بر روی دکمه "Forever" در پالت Animation کلیک کنید و گزینه Forever را انتخاب کنید.
در زیر لیست دکمه های بر روی پالت Animation همراه با کاربرد آنها نوشته شده است:
تعیین تعداد چرخش دوباره کل انیمشن
پریدن به اولین فریم از روی همه فریم ها
انتخاب فریم قبلی متوقف کردن انیمیشن اجرای انیمشن در پنجره سند انتخاب فریم بعدی دستوری برای افزودن و تغییر فریم های بین دو فریم ایجاد فریم جدید بوسیله کپی کردن فریم قبلی حذف کردن فریم انتخاب شده
بهینه سازی بنر:
برای بهینه سازی بنر، مسیر Window > Show Optimize را طی نمایید تا پالت Optimize ظاهر گردد.
در این پالت شما می توانید تنظیماتی را برای کاهش ظرفیت فایل بنر و تنظیم رنگ مورد استفاده در آن بر روی بنر ایجاد نمایید.
توجه : فقط فرمت Gif از فریم های انیمشنی پشتیبانی می نماید.
تست بنر در مرورگر:
برای اطمینان از اینکه در انیمیشن ، متن ها و بقیه لایه ها بصورت درستی جای گذاری شده اند آنرا بر روی مرورگر امتحان می کنیم برای اینکار مسیر Choose File > Preview In را طی نمایید یا اینکه کلیدهای ترکیبی (Ctrl-Alt-p) را همزمان فشار دهید تا پیش نمایش آن در مرورگر به نمایش در بیاید. بعد از اینکه بنر خود را تست نمودید باید آنرا ذخیره نمایید. برای ذخره نمودن بنر باید مسیر File > Save Optimize را طی نمایید تا پنجره با عنوان Save Optimize باز گردد و شما با انتخاب مسیر و نام مورد نظر آنرا بر روی سیستم خود ذخیره نمایید.اجرای انیمیشن: برای اجرای انیمشن ساخته شده در پالت Animation بر روی دکمه Play کلیک کنید تا پیش نمایش آنرا مشاهده نمایید. انیمشن ممکن است که خیلی سریع اجرا گردد.(همه فریم ها با یک سرعت هستند).
زمان بندی فریم ها:
برای تنظیم زمان فریم ها بر روی نشانه گر زیر هر فریم کلیک نمایید تا منوی Pop-up باز گردد. مدت زمانی که هر فریم لازم دارد را برای هر یک تنظیم کنید. برای ادامه چرخش انیمشن بر روی دکمه "Forever" در پالت Animation کلیک کنید و گزینه Forever را انتخاب کنید. در زیر لیست دکمه های بر روی پالت Animation همراه با کاربرد آنها نوشته شده است:
تعیین تعداد چرخش دوباره کل انیمشن
پریدن به اولین فریم از روی همه فریم ها
انتخاب فریم قبلی متوقف کردن انیمیشن اجرای انیمشن در پنجره سند انتخاب فریم بعدی دستوری برای افزودن و تغییر فریم های بین دو فریم ایجاد فریم جدید بوسیله کپی کردن فریم قبلی حذف کردن فریم انتخاب شده
بهینه سازی بنر:
برای بهینه سازی بنر، مسیر Window > Show Optimize را طی نمایید تا پالت Optimize ظاهر گردد.
در این پالت شما می توانید تنظیماتی را برای کاهش ظرفیت فایل بنر و تنظیم رنگ مورد استفاده در آن بر روی بنر ایجاد نمایید.
توجه : فقط فرمت Gif از فریم های انیمشنی پشتیبانی می نماید.
تست بنر در مرورگر:
برای اطمینان از اینکه در انیمیشن ، متن ها و بقیه لایه ها بصورت درستی جای گذاری شده اند آنرا بر روی مرورگر امتحان می کنیم برای اینکار مسیر Choose File > Preview In را طی نمایید یا اینکه کلیدهای ترکیبی (Ctrl-Alt-p) را همزمان فشار دهید تا پیش نمایش آن در مرورگر به نمایش در بیاید. بعد از اینکه بنر خود را تست نمودید باید آنرا ذخیره نمایید. برای ذخره نمودن بنر باید مسیر File > Save Optimize را طی نمایید تا پنجره با عنوان Save Optimize باز گردد و شما با انتخاب مسیر و نام مورد نظر آنرا بر روی سیستم خود ذخیره نمایید در منوی layer می تونید لایه های جدید درست کنید که هر کدومش یک تصویره که معمولا معادل با یک فریم از انیمیشن شماست. میتونید لایه ها رو در Photoshop هم طراحی کنید و با زدن کلیدی که در پایین تصویر مشخص شده اون ها رو به Image ready منتقل کنید
در منوی Animation هم می تونید فریم های جدید درست کنید. با کلیک کردن روی هر فریم در ابزار animation می تونید بعدش توی منوی layer تعیین کنید که کدوم لایه ها دیده بشند و کدوم ها دیده نشند. همون طور که گفتم معمول بر این هست که همه لایه ها مخفی باشند به جز همونی که قراره در فریم مورد نظر دیده بشه... ( برای دیده شدن یا دیده نشدن لایه ها روی عکس چشم بغل اونها در منوی layer کلیک کنید)
برای تعیین زمان طول کشیدن هر فریم هم روی عددی که زیر فریم نوشته شده right Click کنید و زمانش رو تغییر بدین
در پایان که مشخص کردید در هر فریم ، کدوم لایه های دیده بشند، در toolbar اصلی برنامه که مداد و پاک کن و ... داره، عکس Internnet explorer رو بزنید و تصویری رو که ساختید از اونجا save کنید.
